<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>个人资料</title>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache,no-store,must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../admin/css/other/person.css" />
  </head>
  <body class="pear-container">
    <div class="layui-row layui-col-space10">
      <div class="layui-col-md6 layui-col-md-offset3">
        <div class="layui-panel" style="padding: 25px">
          <form class="layui-form" action="javascript:void(0);" lay-filter="form-filter">
            <div class="layui-form-item">
              <label class="layui-form-label">账号</label>
              <div class="layui-input-block">
                <input
                  class="layui-input"
                  type="text"
                  name="userCode"
                  required
                  lay-verify="required"
                  autocomplete="off"
                  disabled
                  style="color: gray"
                />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">姓名</label>
              <div class="layui-input-block">
                <input
                  class="layui-input"
                  type="text"
                  name="userFullName"
                  required
                  lay-verify="required"
                  autocomplete="off"
                  disabled
                  style="color: gray"
                />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">账户角色</label>
              <div class="layui-input-block">
                <input
                  class="layui-input"
                  type="text"
                  name="userRoleName"
                  required
                  lay-verify="required"
                  autocomplete="off"
                  disabled
                  style="color: gray"
                />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">原始密码</label>
              <div class="layui-input-block">
                <input
                  class="layui-input"
                  type="password"
                  name="password"
                  required
                  lay-verify="required"
                  autocomplete="off"
                />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">新密码</label>
              <div class="layui-input-block">
                <input
                  class="layui-input"
                  type="password"
                  name="newPassword"
                  required
                  lay-verify="required"
                  autocomplete="off"
                />
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">确认新密码</label>
              <div class="layui-input-block">
                <input
                  class="layui-input"
                  type="password"
                  name="newPassword2"
                  required
                  lay-verify="required|password2"
                  autocomplete="off"
                />
              </div>
            </div>
            <div class="layui-form-item">
              <div
                class="layui-block"
                style="position: relative; min-height: 37px"
              >
                <div style="position: absolute; right: 0px">
                  <button
                    type="button"
                    class="pear-btn pear-btn-success change-password"
                    lay-submit
                    lay-filter="change-password"
                    change-password
                  >
                    修改密码
                  </button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script>
      // 加载自定义模块,检查浏览器和token
      layui.extend({
        myheader: "{/}/lay-ext/myheader",
      });

      layui.use(
        ["jquery", "element", "layer", "popup", "form", "myheader","button"],
        function () {
          var element = layui.element,
            layer = layui.layer,
            popup = layui.popup,
            form = layui.form,
            myheader = layui.myheader,
						button = layui.button,
            $ = layui.jquery;

          //服务端地址
          myheader.ajaxGlobal(myheader.checkToken().tokenValue);
          // 获取基地址
          var baseUrl = myheader.baseUrl()

          // 请求数据
          $.ajax({
            url: baseUrl+'/user/get1UserRole',
            type:'get',
            success:function(res){
              if(res.code==200){
                //设置表单数据
                form.val("form-filter",{
                  "userCode":res.data.usersPO.userCode,
                  "userFullName":res.data.usersPO.userFullName,
                  "userRoleName":res.data.rolesPO.roleName
                })
              }else {
                popup.failure(res.msg);
              }
            }
          })

          // 自定义表单验证
          form.verify({
            password2: function (val) {
              if (val !== $("[name='newPassword']").val()) {
                return "二次输入的新密码不相同";
              }
							if(!(/^\w+$/.test(val))){
								return "密码只能是字母,数字或符号"
							}
            },
          });

          let loadBtnDom;

          form.on("submit(change-password)", function (data) {
						//使用 ES6 结构函数, 删除多余属性
            const {userFullName,userRoleName,newPassword2,...field} = data.field;
            $.ajax(baseUrl + "/user/changePwd", {
              type: "post",
              data: {
                userCode: data.field.userCode,
                oldPassword: data.field.password,
                newPassword: data.field.newPassword2,
              },
							beforeSend: function(){
								loadBtnDom= button.load({
									elem:'[change-password]'
								})
								$('[change-password]').attr('disabled')
							},
							success: function(data){
								if(data.code===200){									
									layer.alert("修改成功,请重新登录",{closeBtn:0},function(index){
										layer.close(index)
										sessionStorage.removeItem('mytoken')
										sessionStorage.removeItem('userinfo')
										sessionStorage.clear()
										top.window.location.replace('/login.html')
									})
								}else{
									popup.failure('原密码错误')
								}
								loadBtnDom.stop()
							},
							error:function(status){
								popup.failure('服务器异常')
							}
            });

            return false;
          });
        }
      );
    </script>
  </body>
</html>
